<template>
  <div class="articles">
    <div class="articles-body">
      <div v-if="">
      <div v-for="(article, index) in articles" v-bind:key="index">
        <div style="text-align: left">
          <div style="margin-bottom: 10px">
            <span class="paper-title" @click="gotoPaper(article.paper_id)">{{article.paper_title}}</span>
          </div>
          <span v-for="(j, index) in article.authors" :key="j" class="author-name">
                  <span >{{j.author_name}}</span>
                  <span v-if="index<article.authors.length-1" style="color: #A0A0A0; font-size: 14px"> / </span>
                </span>
          <span class="publish-year"> · {{article.year}}</span>
        </div>

        <div style="text-align:left;margin-top:10px;">
          <span class="abstract">{{article.abstract|ellipsis}}</span>
        </div>

        <div class="citation-count">
<!--          <span>{{ article.like_num }}赞同</span>-->
          <span>&nbsp;{{ article.collect_num }}&nbsp;收藏</span>
          <span>&nbsp;·&nbsp;{{ article.citation_count }}&nbsp;点赞</span>
        </div>

        <el-divider v-if="index<articles.length-1"></el-divider>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Articles",
  props: ["articles"],
  data(){
    return{

    }
  },
  methods: {
    gotoSch(author_id) {
      let routeUrl = this.$router.resolve({
        path: '/schPortal',
        query: { v: author_id }
      });
      window.open(routeUrl .href, "_self");
    },
    gotoPaper(paper_id) {
      localStorage.setItem("achievement_id",paper_id);
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: paper_id }
      });
      window.open(routeUrl .href, "_self");
    }
  },
  filters: {
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 300) {
        return value.slice(0,300) + "...";
      }
      return value;
    },
  }
}
</script>

<style scoped>

@import "../styles/article.css";

</style>
